<template>
	<view class="container">

		<view class="user-section">
			<!-- <view class="bg"></view> -->
			<view class="user-info-box" @click="navTo('userinfo')">
				<view class="portrait-box">
					<image class="portrait"  v-if="!hasLogin" src="/static/useCenter/no_login.png"></image>
					<image class="portrait"  v-else :src="userInfo.avatar || '/static/useCenter/no_header.png'"></image>
				</view>
				<view class="info-box">
					<text v-if="!hasLogin" class="username">点击登录/注册</text>
					<text class="username" v-else>
						{{userInfo.nickname||'点击设置昵称'}}
					</text>
					<image src="../../static/useCenter/diamond.png" mode="widthFix" v-if="userInfo.memberType==1"></image>
					<image src="../../static/useCenter/diamond.png" mode="widthFix" v-else-if="userInfo.memberType==2"></image>
					<image src="../../static/useCenter/vip.png" mode="widthFix" v-else-if="userInfo.memberType==3"></image>
					<image src="../../static/useCenter/normal.png" mode="widthFix" v-else-if="(userInfo.memberType==4||userInfo.memberType==null)&&hasLogin"></image>
					<!-- <image src="../../static/useCenter/normal.png" mode="widthFix"></image>
					<image src="../../static/useCenter/vip.png" mode="widthFix"></image> -->
				</view>
				<view class="navigator-arrow" style="right:50upx"></view>
			</view>
			<view class="tj-sction">
				<view class="tj-item" @click="navTo('collectRecord')">
					<text class="num">{{someInfoData.favorites_goods_number}}</text>
					<text>收藏商品</text>
				</view>
				<view class="tj-item" @click="navTo('attentionRecord')">
					<text class="num">{{someInfoData.favorites_shop_number}}</text>
					<text>关注企业</text>
				</view>
				<view class="tj-item" @click="navTo('browseRecord')">
					<text class="num">{{someInfoData.browse_log}}</text>
					<text>浏览记录</text>
				</view>
				<view class="tj-item" @click="navTo('orderDetail')">
					<text class="num">{{someInfoData.score}}</text>
					<text>拥有银两</text>
				</view>
			</view>
		</view>  
		<view class="cover-level">
			<image src="/static/useCenter/img2.png" ></image>
			<view class="navigator" @click="navTo()" style="padding: 36upx 30upx;">
				<view class="navigator-text" style="margin-left: 80upx;color:#FBD4AF;font-size:34upx">当前等级</view>
				<text class="navigator-info"  style="margin-right: 30upx;color:#FBD4AF">{{someInfoData.level_name.name}}</text>
			</view>
		</view>
		<view class="cover-twoItem">
			<view class='model-child' >
				<image src='/static/useCenter/icons-2.png'></image>
				<view style='margin-left:20upx'>
					<view class='font34 color222 fontWeight'>个人排名</view>
					<view class='font20 color999'>No.10</view>
				</view>
			</view>
			<view class='model-child' >
				<image src='/static/useCenter/icons-1.png'></image>
				<view style='margin-left:20upx'>
					<view class='font34 color222 fontWeight'>每日签到</view>
					<view class='font20 color999'> 签到拿银两</view>
				</view>
			</view>
		</view>
		<view class="cover-yaoqing">
			<image src="/static/useCenter/img1.png" mode="widthFix"></image>
		</view>
		<view class="cover-container">
			<view class="history-section icon">
				<view class="navigator " @click="navTo()">
					<image src='/static/useCenter/icon1.png'></image>
					<view class="navigator-text">我的推广</view>
					<text class="navigator-info">邀请有礼</text>
					<view class="navigator-arrow"></view>
				</view>
				<view class="navigator " @click="navTo('address')">
					<image src='/static/useCenter/icon2.png'></image>
					<view class="navigator-text">收货地址</view>
					<view class="navigator-arrow"></view>
				</view>
				<view class="navigator " @click="navTo()">
					<image src='/static/useCenter/icon3.png'></image>
					<view class="navigator-text">转发有奖</view>
					<text class="navigator-info">分享广告赚银两</text>
					<view class="navigator-arrow"></view>
				</view>
				<view class="navigator " @click="navTo('personSetting')">
					<image src='/static/useCenter/icon4.png'></image>
					<view class="navigator-text">设置</view>
					<view class="navigator-arrow"></view>
				</view>
				<view class="navigator " @click="navTo('feedBack')">
					<image src='/static/useCenter/icon5.png'></image>
					<view class="navigator-text">意见反馈</view>
					<view class="navigator-arrow"></view>
				</view>
				<view class="navigator " @click="navTo()">
					<image src='/static/useCenter/icon6.png'></image>
					<view class="navigator-text">客户服务</view>
					<view class="navigator-arrow"></view>
				</view>
				<view class="navigator " @click="navTo('logistics')">
					<image src='/static/useCenter/icon6.png'></image>
					<view class="navigator-text">客户服务</view>
					<view class="navigator-arrow"></view>
				</view>
				<view class="navigator " @click="navTo('selfLifing')">
					<image src='/static/useCenter/icon6.png'></image>
					<view class="navigator-text">客户服务</view>
					<view class="navigator-arrow"></view>
				</view>
				<view class="navigator " @click="navTo('cart')">
					<image src='/static/useCenter/icon6.png'></image>
					<view class="navigator-text">客户服务</view>
					<view class="navigator-arrow"></view>
				</view>
			</view>
		</view>


	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				someInfoData:{}
			}
		},
		onLoad() {
			
		},
		onShow(){
			this.loadSomeInfo(this);
		},
		computed:{
			...mapState(['hasLogin','userInfo'])
		},
		methods: {
			loadSomeInfo(that){
				that.$http.request({
					method: 'POST', // 请求方法必须大写
					url: that.$requestApi.getuserbaseinfo,
					data: {}
				})
				.then(result => {
					let _data = result.data;
					if (_data.code === 200) {
						that.someInfoData=_data.result
					}
				})
				.catch(err => {
					console.log(err);
				});
			},
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url) {
				this.$Router.push({
					name: url,
				})
			},
		}
	}
</script>
<style lang='scss'>
	page{
		background-color:  #FAFAFA;
	}
	.container{
		padding-bottom: 40upx;
	}
	%flex-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	%section {
		display: flex;
		justify-content: space-around;
		align-content: center;
		background: #fff;
		border-radius: 10upx;
	}

	.user-section {
		height: auto;
		padding: 0 0 80upx;
		position: relative;
		background:#fff;
		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			/* filter: blur(1px); */
			/* opacity: .7; */
		}
	}

	.user-info-box {
		height: 180upx;
		display: flex;
		align-items: center;
		
		position: relative;
		z-index: 1;	
		padding: 0 36upx;
		
		.portrait {
			width: 156upx;
			height: 156upx;
			border: 5upx solid #fff;
			border-radius: 50%;
			box-shadow:6px 6px 20px rgba(0,0,0,0.04);
			border: 4upx solid #fff;
		}
		.info-box{
			display: flex;
			flex-direction: column;
			image{
				width: 154upx;
				height: auto;
				margin-left: 36upx;
			}
		}

		.username {
			font-size: 48upx;
			color: $font-color-dark2;
			margin-left: 40upx;
			font-weight: bold;
		}
		.navigator-arrow {
		    position: absolute;
			right: 20upx;
		}
		
		.navigator-arrow:after {
		    content: " ";
		    display: inline-block;
		    height: 23upx;
		    width: 23upx;
		    border-width: 4upx 4upx 0 0;
		    border-color: rgba(209,209,214,1);
		    border-style: solid;
		    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
		    position: absolute;
		    top: 50%;
		    margin-top: -8upx;
		    right: 0upx;
		}
	}

	.cover-level{
		margin-top: -60upx;
		position: relative;
		min-height: 140upx;
		image{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
		.list-color{
			color: #FBD4AF;
		}
	}
	.cover-twoItem{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width:690rpx;
		margin:0 auto;
		.model-child {
		    flex: 0 0 48%;
		    height: 160upx;
		    background: #fff;
		    border-radius: 10upx;
		    display: flex;
		    align-items: center;
		    justify-content: center;
			image {
			    width: 96upx;
			    height: 96upx;
			}
		}
	}
	
	.cover-yaoqing{
		width: 690upx;
		margin: 40rpx auto 0;
		height: auto;
		image{
			width: 100%;
			height: auto;
		}
	}
	.cover-container {
		margin: 0 30upx;
		position: relative;
		background: #fff;
		border-radius: 16upx;
	}

	.tj-sction {
		@extend %section;
		.tj-item {
			@extend %flex-center;
			flex-direction: column;
			height: 140upx;
			font-size: $font-sm;
			color: #75787d;
		}

		.num {
			font-size: 34upx;
			color: $font-color-dark2;
			margin-bottom: 8upx;
			font-weight: bold;
		}
	}
	.navigator {
	    padding: 30upx;
	    position: relative;
	    display: flex;
	    align-items: center;
		image {
		    width: 44upx;
		    height: 44upx;
		    margin-right: 30upx;
		}
		.navigator-text {
		    flex: 1;
			font-size: 34upx;
			color:#0B0E11;
		}
		
		
		.navigator-info {
		    position: absolute;
		    right: 64upx;
			color:#D1D1D6;
			font-size: 30upx;
		}
		.navigator-arrow {
		    position: relative;
		}
		
		.navigator-arrow:after {
		    content: " ";
		    display: inline-block;
		    height: 18upx;
		    width: 18upx;
		    border-width: 4upx 4upx 0 0;
		    border-color:rgba(209,209,214,1);
		    border-style: solid;
		    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
		    position: absolute;
		    top: 50%;
		    margin-top: -12upx;
		    right: 0upx;
		}
	}
	
	.history-section .navigator:before {
	    content: " ";
	    position: absolute;
	    left: 30upx;
	    top: 0;
	    right: 0;
	    height: 1px;
		background-color: rgba(245,245,250,1);
	}
	
	.navigator:first-child:before {
	    display: none;
	}
	.history-section {
		margin-top: 30upx;
		background: #fff;
		border-radius: 16upx;

		.sec-header {
			display: flex;
			align-items: center;
			font-size: $font-base;
			color: $font-color-dark;
			line-height: 40upx;
			margin-left: 30upx;

			.yticon {
				font-size: 44upx;
				color: #5eba8f;
				margin-right: 16upx;
				line-height: 40upx;
			}
		}

		.h-list {
			white-space: nowrap;
			padding: 30upx 30upx 0;

			image {
				display: inline-block;
				width: 160upx;
				height: 160upx;
				margin-right: 20upx;
				border-radius: 10upx;
			}
		}
	}
</style>
